<template>
	<div class="container" @click="handleGallaryClick">
	    <div class="wrapper">
	      <swiper :options="swiperOptions">
	        <swiper-slide
	          v-for="(item, index) in imgs"
	          :key="index"
	        >
	          <img class="gallary-img" :src="item" />
	        </swiper-slide>
	        <div class="swiper-pagination" slot="pagination"></div>
	      </swiper>
	    </div>
	  </div>
</template>
<script>
	export default{
		name:'CommonGallary',
		props:{
			imgs:{
				type:Array,
				default () {
					return []
				}

			}
		},
		data () {
		  return {
		    swiperOptions: {
		      pagination: '.swiper-pagination',
		      paginationType: 'fraction',
		      observeParents: true,
		      observer: true
		    }
		  }
		},
		methods:{
			handleGallaryClick(){
				this.$emit('close')
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.container >>> .swiper-container
	  overflow: inherit
	.container
	  display: flex
	  flex-direction: column
	  justify-content: center
	  z-index: 99
	  position: fixed
	  left: 0
	  right: 0
	  top: 0
	  bottom: 0
	  background: #000
	  .wrapper
	    height: 0
	    width: 100%
	    padding-bottom: 100%
	    .gallary-img
	      width: 100%
	    .swiper-pagination
	      color: #fff
	      bottom: -1rem
</style>